<template>
    <div class="wrapper-wrap">
        <!-- 头部 -->
        <img src="../../../../static/images/content-header-bg.png" alt="" class="slide-bg slide-bg-header">
        <!-- 头部end -->

        <!-- 内容 -->
        <div class="wrapper">

            <!-- 前三名 -->
             <div class="item-table">
                    <div class="item-cell-wrapper">
                        <div class="item-cell">
                            <img src="../../../../static/images/headerBg.png" alt="" class="item-cell-img">
                            <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                            <div class="num">编号:<span>01-09</span></div>
                            <div class="author">作者: <span>欧阳修车</span></div>
                            <div class="btn">11111票</div>
                            <img src="../../../../static/images/rank1.png" alt="" class="rank-logo">
                        </div>
                    </div>
                    <div class="item-cell-wrapper">
                        <div class="item-cell">
                            <img src="../../../../static/images/headerBg.png" alt="" class="item-cell-img">
                            <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                            <div class="num">编号:<span>01-09</span></div>
                            <div class="author">作者: <span>欧阳修车</span></div>
                            <div class="btn">11111票</div>
                            <img src="../../../../static/images/rank2.png" alt="" class="rank-logo">
                        </div>
                    </div>
                    <div class="item-cell-wrapper">
                        <div class="item-cell">
                            <img src="../../../../static/images/headerBg.png" alt="" class="item-cell-img">
                            <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                            <div class="num">编号:<span>01-09</span></div>
                            <div class="author">作者: <span>欧阳修车</span></div>
                            <div class="btn">11111票</div>
                            <img src="../../../../static/images/rank3.png" alt="" class="rank-logo">
                        </div>
                    </div>
                </div>
            <!-- 前三名end -->
            
            
            <!-- 后27名 -->
            <div class="list">
                <div class="list-cell">
                    <img src="../../../../static/images/headerBg.png" alt="" class="list-cell-img">
                    <div class="list-content">
                        <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                        <div class="num">编号:<span>01-09</span></div>
                        <div class="author">作者: <span>欧阳修车</span></div>    
                    </div>
                    <div class="btn">11111票</div>
                </div>
                <div class="list-cell">
                    <img src="../../../../static/images/headerBg.png" alt="" class="list-cell-img">
                    <div class="list-content">
                        <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                        <div class="num">编号:<span>01-09</span></div>
                        <div class="author">作者: <span>欧阳修车</span></div>    
                    </div>
                    <div class="btn">11111票</div>
                </div>
            </div>
            <!-- 后27名 -->
        </div>
        <!-- 内容end -->

        <!-- 底部 -->
        <img src="../../../../static/images/content-footer-bg.png" alt="" class="slide-bg slide-bg-footer">
        <!-- 底部end -->


  

            <!-- 预览图片 -->
            <joinForm ref="prevPoup">
                <div class="prevWrapper">
                    <img src="../../../../static/images/phoneH.png" alt="" class="img">
                    <div class="name">《 <span>哈哈啊多发点是发的哈哈啊</span> 》</div>
                    <div class="prevBottom">
                        <div class="num">编号:<span>01-09</span></div>
                        <div class="author">作者: <span>欧阳修车</span></div>
                    </div>
                </div>  
            </joinForm>
            <!-- 预览图片end -->
    </div>
</template>
<script>
import joinForm  from '@/components/joinForm';
export default {
    data(){
        return{
            activityInfo:'',
            
        }
    },
    components:{
        joinForm
    },
    methods: {
       
        showPrevPoup(){
            //显示预览图片弹窗
            this.$refs.prevPoup.$data.show=true
        },
        submit(){
            //点击手机投票按钮
            console.log(this.phone)
        }
    },
}
</script>
<style lang="scss" scoped>
    .wrapper-wrap{
        // font-size: 0;
        background-image: url('../../../../static/images/contentBg.png');
        padding-bottom: 50px;
    }

    
    //中间内容
    .wrapper{
        background: url('../../../../static/images/content-bg.png');
        background-size: 100% auto;
        font-size: 24px;
    }
    .slide-bg{
        width: 100%;
        display: inline-block;
    }
    .slide-bg-header{
        position: relative;
        top:10px;
    }
    .slide-bg-footer{
        position: relative;
        top:-30px;
    }

    //列表
        .item-table{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin:0 20px;
            padding:30px 0;
            .item-cell-wrapper{
                width: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
                .item-cell{
                    width: 100%;
                    background-color: #fff;
                    padding:5px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    position: relative;
                    .rank-logo{
                        width: 60px;
                        height: 60px;
                        position: absolute;
                        top:-30px;
                        left:0px;
                    }
                    .item-cell-img{
                        width: 100%;
                        height: 200px;
                        object-fit: cover;
                        border-radius: 10px;
                    }
                    .name{
                        display: flex;
                        align-items: center;
                        span{
                            max-width: 80%;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .num,.author{
                        font-weight: 600;
                        margin:10px 0 10px 20px;
                        text-align: left;
                        span{
                            
                            color: #ff7229;
                            display: inline-block;
                            margin-left: 20px;
                            font-weight: 400
                        }
                    }
                    .btn{
                        color:#fff;
                        font-weight: 600;
                        border-radius: 10px;
                        font-size: 30px;
                        background-color: #ff7229;
                    }
                    .btn-activity{
                        background-color: #e84419;
                        
                    }
                }
            }
            
        }


    //后27名列表
    .list{
        margin:0 20px;
        padding:30px 0 100px;
        .list-cell{
            display: flex;
            margin:20px 10px;
            background: #fff;
            align-items: center;
            padding:20px 10px;
            border-radius: 20px;
            box-sizing: border-box;
            .list-cell-img{
                width: 120px;
                height: 80px;
                border-radius: 10px;
                object-fit: cover;
            }
            .list-content{
                display: flex;
                flex-wrap: wrap
            }
            .name{
                width: 100%;
                display: flex;
                align-items: center;
                span{
                    max-width: 80%;
                    display: inline-block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .num,.author{
                font-weight: 600;
                margin:10px 0 10px 20px;
                text-align: left;
                display: flex;
                justify-content: center;
                span{
                    
                    color: #ff7229;
                    display: inline-block;
                    margin-left: 20px;
                    font-weight: 400
                }
            }
            .btn{
                white-space: nowrap;
            }
        }
    }


    //弹窗
    .popup{
        
        .desc{
            text-align: left;
            padding: 10px;
            margin:20px 0;
                line-height: 30px;
                font-size: 24px;
                span{
                    color:#e84419
                }
            }
        .tip{
            text-align: left;
            padding: 10px;
            margin:20px 0;
        }
        .tipsVote{
            text-align: center;
            font-weight: 600;
            font-size: 30px;
            margin:30px 0;
        }
        input{
            border:none;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            margin:20px 0;
            height: 50px;
            line-height: 50px;
        }
        textarea{
            border:none;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            margin:20px 0;
        }
        button{
            color:#fff;
            font-weight: 600;
            background-color: #e84419;
            border-radius: 20px;
            padding: 20px 0;
            box-sizing: border-box;
            width: 90%;
            margin:20px 0;
        }
    }
</style>